<template>
  <div>
    <el-dialog title="编辑机构" :visible.sync="showEditOrganizationDialog" center width="770px">
      <el-form :model="organizationData" :rules="rules" ref="organizationData">

        <el-form-item label="机构名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="organizationData.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="所属用户" :label-width="formLabelWidth">
          <el-select v-model="organizationData.customer_id" filterable placeholder="请选择">
            <el-option
              v-for="item in customerList"
              :key="item.customer_id"
              :label="item.nickname"
              :value="item.customer_id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="所属省份和城市" :label-width="formLabelWidth">
          <el-cascader placeholder="试试搜索：广东"
                       :options="provinceAndCityList"
                       :props="{ value: 'value', label: 'label'}"
                       @change="handleChange"
                       filterable>
          </el-cascader>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="organizationData.status" :label="0">停用</el-radio>
          <el-radio v-model="organizationData.status" :label="1">启用</el-radio>
        </el-form-item>


        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="organizationData.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth">
          <el-input v-model="organizationData.contact" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="telephone">
          <el-input v-model="organizationData.telephone" autocomplete="off"></el-input>
        </el-form-item>




      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="submitStore('organizationData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  import {edit} from '@/api/thk/organization'


  export default {
    name: 'editOrganization',

    /**
     customer_organization_id         customer_organization_id
     customer_id                      用户id
     name	VarChar                     机构名称
     city                             所属城市
     address                          具体地址
     status                           状态
     contact                          联系人
     telephone                        联系电话
     date_added                       添加日期

     */

    data() {
      return {
        showEditOrganizationDialog: false,
        formLabelWidth: '130px',

        organizationData: {
          customer_organization_id: '',
          customer_id: '',
          name: '',
          city: '',
          province: '',
          address: '',
          country: '',
          status: 1,                        // 状态默认启用
          contact: '',
          telephone: '',
        },

        customerList: [],
        provinceAndCityList: [],

        // 表单校验规则
        rules: {
          // 店铺名为必须
          name:[
            { required: true, message: '请输入机构名称', trigger: 'blur' },
          ],
          telephone:[
            { required: true, message: '请输手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '长度必须为11位', trigger: 'blur' }
          ]
        }
      }
    },


    methods: {
      // 判断是否点击了提交
      submitStore(organizationData){
        this.$refs[organizationData].validate((valid) => {
          if (valid) {
            console.log('------------>Edit organizationData')
            console.log(this.organizationData)
            edit(store.getters.token,this.organizationData).then(result => {
              // 增加成功
              this.showEditOrganizationDialog = !this.showEditOrganizationDialog
              this.$parent.getOrganizationList()
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      cancelDialog(){
        this.showEditOrganizationDialog = !this.showEditOrganizationDialog
      },

      // 显示dialog,并将数据回显
      showEditDialog(row, customerList, provinceAndCityList){


        /**
         customer_organization_id         customer_organization_id
         customer_id                      用户id
         name	VarChar                     机构名称
         city                             所属城市
         address                          具体地址
         status                           状态
         contact                          联系人
         telephone                        联系电话
         */


        this.organizationData.customer_organization_id=row.customer_organization_id
        this.organizationData.customer_id=row.customer_id
        this.organizationData.name=row.name

        // 省份和城市，不再是id,而直接是名字，所以不用获取传递的值
        // this.organizationData.province=row.province
        // this.organizationData.city=row.city

        this.organizationData.address=row.address
        this.organizationData.contact=row.contact
        this.organizationData.telephone=row.telephone
        this.customerList = customerList
        this.provinceAndCityList = provinceAndCityList
        // 修改label属性
        this.changeCityData()


        this.showEditOrganizationDialog = !this.showEditOrganizationDialog

      },

      // 转换省份数据
      changeCityData(){
        console.log("changeCityList",this.provinceAndCityList)
        let data = {data: this.provinceAndCityList}
        let str = JSON.stringify(data).replace(/province_id/g,'value')
        str = str.replace(/province/g,'label')

        str = str.replace(/city_id/g,'value')
        str = str.replace(/city/g,'label')

        str = str.replace(/country_id/g,'value')
        str = str.replace(/country/g,'label')

        data = JSON.parse(str)
        this.provinceAndCityList = data.data
      },

      handleChange(value){
        if(value){
          this.storeData.province = value[0]
          this.storeData.city = value[1]
          this.storeData.country = value[2]
        }
      },

    }
  }
</script>
